Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / CardStack.vue

Displaying Raw • Download

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"card-stack-wrapper flex-1 flex flex-col min-h-0" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4{ Ta5d6ff'is-expanded'Tff7b72: Te6edf3isExpanded Tb4b4b4}Ta5d6ff"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3items Tff7b72&& Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72> T79c0ff0Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"relative"

Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4{ Ta5d6ff'stack-mode'Tff7b72: Tff7b72!Te6edf3isExpanded Tff7b72&& Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Tb4b4b4, Ta5d6ff'grid-mode'Tff7b72: Te6edf3isExpanded Tff7b72|| Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72=== T79c0ff1 Tb4b4b4}Ta5d6ff"

Tb4b4b4>

T8b949e<!-- Grid Mode (Expanded or only 1 item) -->

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isExpanded Tff7b72|| Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72=== T79c0ff1Ta5d6ff" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3gridClassTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"flex-1 min-h-0"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3itemTb4b4b4, Te6edf3indexTb4b4b4) Tff7b72in Te6edf3itemsTa5d6ff" Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3indexTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"w-full"Tb4b4b4>

Tb4b4b4<Tff7b72slot Tb4b4b4:Te6edf3itemTff7b72=Ta5d6ff"Te6edf3itemTa5d6ff" Tb4b4b4:Te6edf3indexTff7b72=Ta5d6ff"Te6edf3indexTa5d6ff"Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72slotTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- Stack Mode (Collapsed and > 1 item) -->

Tb4b4b4<Tff7b72div Te6edf3v-else Te6edf3classTff7b72=Ta5d6ff"relative flex-1 min-h-[320px]" Tb4b4b4:Te6edf3styleTff7b72=Ta5d6ff"Tb4b4b4{ Te6edf3minHeightTff7b72: Te6edf3stackHeight Tff7b72+ Ta5d6ff'px' Tb4b4b4}Ta5d6ff"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3itemTb4b4b4, Te6edf3indexTb4b4b4) Tff7b72in Te6edf3stackedItemsTa5d6ff"

Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Te6edf3indexTa5d6ff"

Te6edf3classTff7b72=Ta5d6ff"absolute inset-x-0 top-0 transition-all duration-300 ease-in-out cursor-pointer"

Tb4b4b4:Te6edf3styleTff7b72=Ta5d6ff"Te6edf3getStackStyleTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3onCardClickTb4b4b4(Te6edf3indexTb4b4b4)Ta5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72slot Tb4b4b4:Te6edf3itemTff7b72=Ta5d6ff"Te6edf3itemTa5d6ff" Tb4b4b4:Te6edf3indexTff7b72=Ta5d6ff"Te6edf3indexTa5d6ff"Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72slotTb4b4b4>

T8b949e<!-- Overlay for non-top cards -->

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3index Tff7b72> T79c0ff0Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"absolute inset-0 bg-white/20 dark:bg-black/20 rounded-[inherit] pointer-events-none"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

T8b949e<!-- Controls -->

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"absolute -bottom-2 right-0 flex items-center gap-2 z-[60]"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-xs font-mono text-gray-500 dark:text-gray-400 mr-2"Tb4b4b4>

Tff7b72{{ Te6edf3activeIndex Tff7b72+ T79c0ff1 Tff7b72}} / Tff7b72{{ Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72}}

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3classTff7b72=Ta5d6ff"p-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-gray-300 transition shadow-sm border border-gray-200 dark:border-zinc-700"

Te6edf3titleTff7b72=Ta5d6ff"Previous"

Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3prevTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"chevron-left" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3classTff7b72=Ta5d6ff"p-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-gray-700 dark:text-gray-300 transition shadow-sm border border-gray-200 dark:border-zinc-700"

Te6edf3titleTff7b72=Ta5d6ff"Next"

Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3nextTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"chevron-right" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3items Tff7b72&& Te6edf3itemsTb4b4b4.Te6edf3length Tff7b72> T79c0ff1Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"mt-4 flex justify-center"Tb4b4b4>

Tb4b4b4<Tff7b72button

Te6edf3classTff7b72=Ta5d6ff"flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 text-xs font-bold text-gray-700 dark:text-gray-300 transition shadow-sm border border-gray-200 dark:border-zinc-700 uppercase tracking-wider"

Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3isExpanded Tff7b72= Tff7b72!Te6edf3isExpandedTa5d6ff"

Tb4b4b4>

Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3isExpanded Tff7b72? Ta5d6ff'collapse-all' Tff7b72: Ta5d6ff'expand-all'Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"size-4" Tb4b4b4/Tb4b4b4>

Tff7b72{{ Te6edf3isExpanded Tff7b72? Ta5d6ff"Collapse Stack" Tff7b72: Ta5d6ff`Ta5d6ffShow All Tffd700${Te6edf3itemsTb4b4b4.Te6edf3lengthTffd700}Ta5d6ff` Tff7b72}}

Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"./MaterialDesignIcon.vue"Tb4b4b4;

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"CardStack"Tb4b4b4,

Te6edf3componentsTff7b72: Tb4b4b4{

Te6edf3MaterialDesignIconTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3propsTff7b72: Tb4b4b4{

Te6edf3itemsTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657ArrayTb4b4b4,

Te6edf3requiredTff7b72: Tff7b72trueTb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3maxVisibleTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657NumberTb4b4b4,

Tff7b72defaultTff7b72: T79c0ff3Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3stackHeightTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657NumberTb4b4b4,

Tff7b72defaultTff7b72: T79c0ff320Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3gridClassTff7b72: Tb4b4b4{

Te6edf3typeTff7b72: Tffa657StringTb4b4b4,

Tff7b72defaultTff7b72: Ta5d6ff"grid grid-cols-1 gap-4"Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72return Tb4b4b4{

Te6edf3isExpandedTff7b72: Tff7b72falseTb4b4b4,

Te6edf3activeIndexTff7b72: T79c0ff0Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3computedTff7b72: Tb4b4b4{

Te6edf3stackedItemsTb4b4b4(Tb4b4b4) Tb4b4b4{

T8b949e// Reorder items so the active item is at index 0

Tff7b72const Te6edf3result Tff7b72= Tb4b4b4[Tb4b4b4]Tb4b4b4;

Tff7b72const Te6edf3count Tff7b72= Tffa657MathTb4b4b4.Te6edf3minTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4, Tff7b72thisTb4b4b4.Te6edf3maxVisibleTb4b4b4)Tb4b4b4;

Tff7b72for Tb4b4b4(Tff7b72let Te6edf3i Tff7b72= T79c0ff0Tb4b4b4; Te6edf3i Tff7b72< Te6edf3countTb4b4b4; Te6edf3iTff7b72++Tb4b4b4) Tb4b4b4{

Tff7b72const Te6edf3idx Tff7b72= Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72+ Te6edf3iTb4b4b4) Tff7b72% Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4;

Te6edf3resultTb4b4b4.Te6edf3pushTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4[Te6edf3idxTb4b4b4]Tb4b4b4)Tb4b4b4;

Tb4b4b4}

Tff7b72return Te6edf3resultTb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Te6edf3methodsTff7b72: Tb4b4b4{

Te6edf3nextTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72= Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72+ T79c0ff1Tb4b4b4) Tff7b72% Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3prevTb4b4b4(Tb4b4b4) Tb4b4b4{

Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72= Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72- T79c0ff1 Tff7b72+ Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4) Tff7b72% Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4;

Tb4b4b4}Tb4b4b4,

Te6edf3onCardClickTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Te6edf3index Tff7b72> T79c0ff0Tb4b4b4) Tb4b4b4{

T8b949e// If clicked a background card, bring it to front

Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72= Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3activeIndex Tff7b72+ Te6edf3indexTb4b4b4) Tff7b72% Tff7b72thisTb4b4b4.Te6edf3itemsTb4b4b4.Te6edf3lengthTb4b4b4;

Tb4b4b4}

Tb4b4b4}Tb4b4b4,

Te6edf3getStackStyleTb4b4b4(Te6edf3indexTb4b4b4) Tb4b4b4{

Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isExpandedTb4b4b4) Tff7b72return Tb4b4b4{Tb4b4b4}Tb4b4b4;

Tff7b72const Te6edf3offset Tff7b72= T79c0ff8Tb4b4b4; T8b949e// px

Tff7b72const Te6edf3scaleReduce Tff7b72= T79c0ff0.05Tb4b4b4;

Tff7b72return Tb4b4b4{

Te6edf3zIndexTff7b72: T79c0ff50 Tff7b72- Te6edf3indexTb4b4b4,

Te6edf3transformTff7b72: Ta5d6ff`Ta5d6fftranslateY(Tffd700${Te6edf3index Tff7b72* Te6edf3offsetTffd700}Ta5d6ffpx) scale(Tffd700${T79c0ff1 Tff7b72- Te6edf3index Tff7b72* Te6edf3scaleReduceTffd700}Ta5d6ff)Ta5d6ff`Tb4b4b4,

Te6edf3opacityTff7b72: T79c0ff1 Tff7b72- Te6edf3index Tff7b72* T79c0ff0.2Tb4b4b4,

Te6edf3pointerEventsTff7b72: Te6edf3index Tff7b72=== T79c0ff0 Tff7b72? Ta5d6ff"auto" Tff7b72: Ta5d6ff"auto"Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>

Tb4b4b4<Tff7b72style Te6edf3scopedTb4b4b4>

Tb4b4b4.T56d364card-stack-wrapper Tb4b4b4{

Tff7b72widthTb4b4b4: T79c0ff100Tffa657%Tb4b4b4;

Tb4b4b4}

Tb4b4b4.T56d364stack-mode Tb4b4b4{

Tff7b72perspectiveTb4b4b4: T79c0ff1000Tffa657pxTb4b4b4;

Tb4b4b4}

Tb4b4b4<Tb4b4b4/Tff7b72styleTb4b4b4>